<template>
  <div class="mainPad">
    <div class="xxlist">
      <div class="l1">
        <label class="ti" for="demo01">联系人：</label>
        <input class="t" type="text" v-model="contactName" placeholder="联系人姓名" id="demo01">
      </div>
      <div class="l1">
        <div class="ti">
          性别：
        </div>
        <div class="t">
          男<input type="radio" name="sex" v-model="contactSex" value=1>
          女<input type="radio" name="sex" v-model="contactSex" value=0>
        </div>
      </div>
      <div class="l1">
        <label class="ti" for="demo02">电话：</label>
        <!-- trim去掉输入数据的前后空格 -->
        <input class="t" type="text" v-model="contectTel" placeholder="电话" id="demo02">
      </div>
      <div class="l1">
        <label class="ti" for="demo03">收货地址：</label>
        <!-- trim去掉输入数据的前后空格 -->
        <input class="t" type="text" v-model="address" placeholder="收货地址" id="demo03">
      </div>

    </div>
    <div class="qrzf" @click="saveAndToAddressList">
      <div class="my-2">保存</div>
    </div>

  </div>
</template>

<script setup lang="ts">
import {onBeforeMount, reactive, ref} from "vue";
import axios from "axios";
import router from "../router";
import store, {userStore} from "../store";

function setTitle(){
  store.state.tit="新增送货地址"
}

onBeforeMount(()=>{
  setTitle()
})

const userstore = userStore()
const list = ref([])
const userId = userstore.userId
const contactName = ref('')
const contactSex = ref(1)
const contectTel = ref('')
const address = ref('')
const data=reactive({
  userId:'',
  contactName:'',
  contactSex:'',
  contactTel:'',
  address:'',

})
const saveAndToAddressList = ()=>{
  axios.post('/path/Address/User',{data

  })
      .then(res=>{
        list.value = res.data;
        console.log(res.data)
      })

  router.push('/addressList')

}

</script>

<style scoped>

.mainPad {
  height: 86vh;
  overflow: scroll;
  @apply relative;
}

.l1{
  @apply m-2 flex flex-row;
}

.ti{
  width: 25%;
  @apply flex font-semibold text-gray-700;
}

.t{
  @apply flex text-gray-400;
}

.t i{
  @apply flex justify-center content-center items-center mx-2;
}

.qrzf{
  @apply border rounded-md bg-green-500 text-white font-semibold
  flex justify-center content-center items-center m-2;
}

.barPad div {
  @apply basis-1/4 text-center;
}
</style>